<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template class="person">
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">基本资料</span>
      </el-col>

      <el-col :offset="18" :span="2" align="right">
        <el-button v-show="canEdit && isShow && editable" size="small" @click="edit()" plain>编辑</el-button>
      </el-col>
    </el-row>

    <el-row style="justify-content: center">
      <el-button @click="addNew()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-if="!isShow && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加基本资料信息</span>
      </el-button>
    </el-row>

    <el-form ref="personInfo"
             :model="personInfo"
             v-show="isShow"
             v-loading="loading"
             :class="{cardBackColor:!canEdit}"
             :rules="rules"
             label-width="100px"
             style="text-align: left;padding-top: 12px" inline>
      <el-row>
        <ft-input v-model="personInfo.customerId" v-if="2 == 1"></ft-input>
      </el-row>
      <!--基本信息展示-->
      <el-row style="padding-bottom: 24px;padding-left: 12px;padding-right: 12px">
        <el-col :md="8" :lg="6">
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="personInfo.sex" v-if="!canEdit" label="MALE" style="margin-left: 8px">男</el-radio>
            <el-radio v-model="personInfo.sex" v-if="!canEdit" label="FEMALE">女</el-radio>
            <span v-if="canEdit" style="padding: 8px 0px 8px 8px">{{convertSex(personInfo.sex)}}</span>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="出生日期" prop="birthday">
            <ft-date-picker v-model="personInfo.birthday"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy-MM-dd"
                            valueFormat="yyyy-MM-dd"
                            :editing="!canEdit">
            </ft-date-picker>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="年龄" prop="age">
            <ft-input :editable="!canEdit" v-model="personInfo.age"></ft-input>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="民族" prop="nation">
            <ft-data-enum-select
              v-model="personInfo.nation"
              type-name="nationEnum"
              placeholder="请选民族"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="国籍">
            <ft-data-enum-select
              v-model="personInfo.customerNationalityId"
              type-name="countryEnum"
              placeholder="请选国籍"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light">
            <div slot="content">证件有效期开始日期</div>
            <el-form-item label="证件有效期开始日期" prop="identityEffectiveStartDate">
              <ft-date-picker v-model="personInfo.identityEffectiveStartDate"
                              type="date"
                              placeholder="选择日期"
                              format="yyyy-MM-dd"
                              valueFormat="yyyy-MM-dd"
                              :editing="!canEdit">
              </ft-date-picker>
            </el-form-item>
          </el-tooltip>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light">
            <div slot="content">证件有效期终止日期</div>
            <el-form-item label="证件有效期终止日期" prop="identityEffectiveEndDate">
              <ft-date-picker v-model="personInfo.identityEffectiveEndDate"
                              type="date"
                              placeholder="选择日期"
                              format="yyyy-MM-dd"
                              valueFormat="yyyy-MM-dd"
                              :editing="!canEdit">
              </ft-date-picker>
            </el-form-item>
          </el-tooltip>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="证件签发机关" prop="identityIssuingAuthority">
            <ft-input :editable="!canEdit" v-model="personInfo.identityIssuingAuthority"></ft-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light">
            <div slot="content">证件签发机关所在地行政区划</div>
            <el-form-item label="证件签发机关所在地行政区划">
              <ft-data-enum-select v-model="personInfo.issuingAuthorityLocation"
                                   type-name="area"
                                   placeholder="请选择"
                                   :editing="!canEdit">
              </ft-data-enum-select>
            </el-form-item>
          </el-tooltip>
        </el-col>

        <el-col :md="8" :lg="6">
            <el-form-item label="户籍地址" prop="censusRegisterAddress">
              <ft-input v-model="personInfo.censusRegisterAddress"
                        :editable="!canEdit"
                        class="inputClass"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light">
            <div slot="content">地区(省市区县)</div>
            <el-form-item label="地区(省市区县)" prop="areaId">
              <ft-areas-cascader style="width: 100%" :editable="!canEdit"
                                 v-model="personInfo.areaId"></ft-areas-cascader>
            </el-form-item>
          </el-tooltip>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="邮编" prop="postcode">
            <ft-number-input :editable="!canEdit" :split="false" v-model="personInfo.postcode" :precision='[6]'></ft-number-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="手机号码" prop="telphone">
            <ft-input :editable="!canEdit" v-model="personInfo.telphone"></ft-input>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="电子邮箱" prop="email">
            <ft-input :editable="!canEdit" v-model="personInfo.email"></ft-input>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="传真" prop="fax">
            <ft-input :editable="!canEdit" v-model="personInfo.fax"></ft-input>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="最高学位" prop="degree">
            <ft-data-enum-select
              v-model="personInfo.degree"
              type-name="academicDegree"
              placeholder="请选最高学位"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="最高学历" prop="educationBackground">
            <ft-data-enum-select
              v-model="personInfo.educationBackground"
              type-name="educationBackground"
              placeholder="请选最高学历"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="政治面貌" prop="politicsStatus">
            <ft-data-enum-select v-model="personInfo.politicsStatus"
                            type-name="politicsStatus"
                            :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="年收入" prop="annualIncomeOwner">
            <ft-number-input :editable="!canEdit" v-model="personInfo.annualIncomeOwner"
                             :precision='[15]'></ft-number-input>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="纳税年收入" prop="ratepayingAnnualIncome">
            <ft-number-input :editable="!canEdit" v-model="personInfo.ratepayingAnnualIncome"
                             :precision='[15]'></ft-number-input>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="就业状况" prop="employmentSituation">
            <ft-data-enum-select
              v-model="personInfo.employmentSituation"
              type-name="employmentSituation"
              placeholder="请选就业状况"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>

        <el-col :md="8" :lg="6">
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <ft-data-enum-select v-model="personInfo.maritalStatus"
                                 type-name="maritalStatus"
                                 placeholder="请选择"
                                 :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>
      </el-row>
      <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px" v-show="!canEdit"/>
      <el-row style="padding:16px 0px" v-show="!canEdit">
        <el-col style="text-align: right">
          <el-button size="mini"
                     v-show="!canEdit"
                     @click="cancel()">取消
          </el-button>
          <el-button size="mini"
                     v-show="!canEdit"
                     type="primary"
                     @click="onSave()"
                     style="margin-left: 24px;margin-right: 36px"
                     :disabled="canEdit">保存
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import FtDatePicker from "../ft/FtDatePicker"
  import {mobileFormat, mailFormat,postCode} from "@/pages/pc/assets/js/validate/rule.js"

  export default {
    name: "PersonInfo",
    components: {FtDatePicker},
    props: {
      customerId: {
        type : String,
        default : '',
      },
      dataVersion: {
        type : Number,
        default : 0,
      },
      editable: {
        type : Boolean,
        default : true,
      },
    },
    mounted() {
      this.load()
    },
    data() {
      let validateMobile = (rule, value, callback) => {
        if (value != '' && value != null && !mobileFormat(value)) {
          callback(new Error("请输入正确的手机号码"))
        } else {
          callback()
        }
      }
      let validateMail = (rule, value, callback) => {
        if (value != '' && value != null && !mailFormat(value)) {
          callback(new Error("请输入正确的邮箱地址"))
        } else {
          callback()
        }
      }
      let validatefax = (rule, value, callback) => {
        let reg =  /^(\d{3,4}-)?\d{7,8}$/
        if (value && !reg.test(value)) {
          callback(new Error('请输入正确的传真号码'))
        } else {
          callback()
        }
      }
      let validAge = (rule, value, callback) => {
        let reg = /^((1[0-5])|[1-9])?\d$/
        if (value && !reg.test(value)) {
          callback(new Error('请输入正确的年龄'))
        } else {
          callback()
        }
      };
      let validStrartEndDate = (rule, value, callback) => {
        const not_null_flag = this.personInfo.identityEffectiveStartDate && this.personInfo.identityEffectiveEndDate &&
          this.personInfo.identityEffectiveStartDate != '' && this.personInfo.identityEffectiveEndDate != '';
        if (not_null_flag && this.personInfo.identityEffectiveStartDate > this.personInfo.identityEffectiveEndDate) {
          callback(new Error('证件有效终止时间 不能早于开始时间'))
        } else {
          callback()
        }
      };
      let validatePostCode = (rule, value, callback) => {
        if (value != '' && value != null && !postCode(value)) {
          callback(new Error("请输入正确的邮编"))
        } else {
          callback()
        }
      }
      return {
        //默认中国
        personInfo: {},
        personInfoBak: {},
        canEdit: true,
        isShow: false,
        loading: true,
        outTime: 0,
        rules: {
          sex:[
            {required: true, message: '性别不能为空', trigger: 'blur'}
          ],
          identityEffectiveStartDate: [
            {validator: validStrartEndDate, trigger: 'blur',}
          ],
          identityEffectiveEndDate: [
            {validator: validStrartEndDate, trigger: 'blur',}
          ],
          telphone: [
            {validator: validateMobile, trigger: 'blur',}
          ],
          email: [
            {validator: validateMail, trigger: 'blur',}
          ],
          age: [
            {validator: validAge, trigger: 'blur',}
          ],
          identityIssuingAuthority: [
            {max: 80, message: '输入字符不得超过80字'}
          ],
          censusRegisterAddress: [
            {max: 100, message: '输入字符不得超过100字'}
          ],
          residentialAddress: [
            {max: 100, message: '输入字符不得超过100字'}
          ],
          areaId: [
            {max: 40, message: '输入字符不得超过40字'}
          ],
          fax: [
            {max: 30, message: '传真不得超过30字',trigger:'blur'},
            {validator: validatefax, trigger: 'blur',}
          ],
          postcode:[{validator:validatePostCode,trigger:'blur'}]
        },
      }
    },

    methods: {
      changeValue(value) {
        if (value === '10' || value === '91' || value === '40' || value == null || value == '') {
          this.$emit("changeMarriage", {showMarriageInfo: false})
        } else {
          this.$emit("changeMarriage", {showMarriageInfo: true})
        }
      },
      changeEmploy(value) {
        if (value === '11' || value === '13' || value === '17'|| value === '21' || value === '24' || value === '37'|| value === '91'  ) {
          this.$emit("changeCompany", {showCompanyInfo: true})
        } else {
          this.$emit("changeCompany", {showCompanyInfo: false})
        }
      },
      load() {
        this.$http.get('/joys-rest/lss-customer/custInfo/person/' + this.customerId).then(
          resp => {
            this.personInfo = resp.body
            if (this.emptyData(this.personInfo)) {
              this.isShow = true
              this.canEdit = true
              this.loading = false
            } else {
              this.isShow = false
            }
          },
          resp => {
            this.$message.error(resp.body)
          })
      },
      //基本信息保存
      onSave() {
        // this.loading = false
        if (this.dataVersion > this.personInfo.dataVersion) {
          this.personInfo.dataVersion = this.dataVersion
        }
        this.$refs.personInfo.validate((valid) => {
          if (valid) {
            this.$http.put('/joys-rest/lss-customer/custInfo/person/', this.personInfo, {
              params: {
                sourceModule: "基本资料",
              }
            }).then(
              resp => {
                this.personInfo = resp.body
                this.canEdit = true
                this.changeValue(this.personInfo.maritalStatus)
                this.changeEmploy(this.personInfo.employmentSituation)
                this.loading = false
                //更新dataVersion值
                this.$emit("changeDataVersion",this.personInfo.dataVersion)
                this.$message.success('保存成功!')
              },
              resp => {
                this.loading = false
                this.$message.error(resp.body.message)
              })
          }
          else {
            return false
          }
        })
      },
      //显示表体
      addNew() {
        this.isShow = true
        this.canEdit = false
        if (this.personInfo && !this.personInfo.customerNationalityId) {
          this.personInfo.customerNationalityId = '156'
        }
      },
      //表单编辑按钮
      edit() {
        this.canEdit = false
        this.personInfoBak = JSON.parse(JSON.stringify(this.personInfo))
      },
      //表单取消按钮
      cancel() {
        this.canEdit = true
        this.personInfo = this.personInfoBak
        this.$refs.personInfo.clearValidate()
      },
      emptyData(obj) {
        if (obj.sex != null) {
          return true
        }
        if (obj.birthday != null) {
          return true
        }
        if (obj.age != null) {
          return true;
        }
        if (obj.nation != null) {
          return true
        }
        if (obj.customerNationalityId != null) {
          return true
        }
        if (obj.identityEffectiveStartDate != null) {
          return true
        }
        if (obj.identityEffectiveEndDate != null) {
          return true
        }
        if (obj.identityIssuingAuthority != null) {
          return true
        }
        if (obj.issuingAuthorityLocation != null) {
          return true
        }
        if (obj.censusRegisterAddress != null) {
          return true
        }
        if (obj.areaId != null) {
          return true
        }
        if (obj.residentialAddress != null) {
          return true
        }
        if (obj.postcode != null) {
          return true
        }
        if (obj.telphone != null) {
          return true
        }
        if (obj.email != null) {
          return true
        }
        if (obj.degree != null) {
          return true
        }
        if (obj.educationBackground != null) {
          return true
        }
        if (obj.politicsStatus != null) {
          return true
        }
        if (obj.annualIncomeOwner != null) {
          return true
        }
        if (obj.ratepayingAnnualIncome != null) {
          return true
        }
        if (obj.maritalStatus != null) {
          return true
        }
        if (obj.employmentSituation != null) {
          return true
        }
      },
      convertSex(val) {
        if ('MALE' == val) {
          return '男'
        }
        if ('FEMALE' == val) {
          return '女'
        }
        return val
      },
    }
  }
</script>
<style>

</style>
<style scoped>
  /*文本框数字过多时显示部分内容+省略号*/
  .inputClass{
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    width:auto;
  }
</style>
